<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="css/main.css">
		<title>遇见 爱情</title>
	</head>
	<!-- 
	 input logic code
	 
	 -->
	<body>

		<div class="container-wrapper">
			<div class="container container-sm">
				<div class="header">
					<h1>
						<div class="b-title">60秒完成注册，幸福一辈子!</div>
					</h1>
				</div>

				<div class="form">
					<form id="signup" action="">
						<div class="input-group">
							<label for="">姓名</label>
							<input id="test"
								data-rule='pattern:"^[\u4E00-\u9FA5a-zA-Z]{2,30}$"|maxlength:30|minlength:2' name="name"
								type="text" class="input-control">
							<div class="input-error inline-block " id="name-input-error">有误: 姓名必须是中文或者字母, 长度为 2—30 个字符
							</div>
						</div>


						<div class="input-group">
							<label for="">年龄</label>
							<input name="age" type="text" data-rule='max:100|min:18' class="input-control">
							<div class="input-error" id="age-input-error">有误:年龄范围在 18-100 </div>
						</div>


						<div class="input-group">

							<label for="">手机号</label>
							<input name="phone" type="text"
								data-rule='pattern:"^1[3-9][0-9]{9}$"|maxlength:11|minlength:11' class="input-control">
							<div class="input-error" id="phone-input-error">有误:输入正确的手机号</div>
						</div>


						<div class="input-group">
							<label for="">密码</label>
							<input name="password" type="password" data-rule='maxlength:24|minlength:6'
								class="input-control">
							<div class="input-error" id="password-input-error">有误:密码长度应在6-24之间，需同时包含大写、小写字母和数字</div>
						</div>



						<div class="input-group">

							<label for="">自我介绍</label>
							<input name="description" type="text" data-rule='required:true|maxlength:64|minlength:1'
								class="input-control">
							<div class="input-error" id="description-input-error">自我介绍不能超过64个字符且大于1个字符</div>
						</div>


						<div class="clear-float">
							<button type="submit" class="btn-sign">免费注册</button>
						</div>
					</form>

				</div>


			</div>
		</div>


		<div class="footer clear-float">

			<span><a href="#">关于我们</a></span> |
			<span><a href="#">联系我们</a></span> |
			<span><a href="#">加入我们</a></span> |
			<span><a href="#">合作伙伴</a></span> |
			<span><a href="#">意见反馈</a></span> |
			<span><a href="#">安全中心</a></span> |
			<span><a href="#">网站地图</a></span> |
			<span><a href="#">帮助中心</a></span>

		</div>


		<script src="js/jquery.3.6.0.js"></script>
		<script src="js/validator.js"></script>
		<script src="js/input.js"></script>
		<script src="js/main.js"></script>
	</body>

	<script>
		arr = [
			"pattern:\"^1[3-9]\\d{9}$\"",
			"maxlength:11",
			"minlength:11"
		]
	</script>
</html>
